<template>
	<div style="width: 100%;height: 100%;" class="box">
		<ul class="list">
			<van-checkbox-group :value="selectList" @change="onChange">
				<van-swipe-cell :right-width="65" :left-width="0" v-for="item,index in carList" :key="index">
					<van-cell-group>
						<div style="display: flex;align-items: center;justify-content: space-between;">
							<van-checkbox :name="item.id" checked-color="#42E577" style="width: 35px;"
								icon-size="26px"></van-checkbox>
							<commodityItem :data="item" isShowbtn='stepper' @commodityChange="commodityChange"
								:showBorderList='showBorderList' style="flex: 1	;">
							</commodityItem>
						</div>
					</van-cell-group>
					<view slot="right" class="van-swipe-cell__right" @click="delCar(item)">删除</view>
				</van-swipe-cell>


			</van-checkbox-group>

			<van-empty v-if="carList.length == 0" class="custom-image"
				image="https://img.yzcdn.cn/vant/custom-empty-image.png" description="购物车为空" />
		</ul>

		<div class="bottom">
			<van-checkbox class="checkbox" :value="isAll" @change="isAllChange"
				checked-color="#42E577">全选</van-checkbox>
			<div class="sum">
				<p>
					<span>合计：</span>
					<span>￥{{ sum }}</span>
				</p>

				<button @click="goCloseAnAccount">去结算</button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		deleteShoppingCart,
		getShoppingCartList,
		saveOrder
	} from "../../api/car"
	import commodityItem from "../../components/commodity_item/index.vue"
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync("userInfo") || {},
				carList: [],

				// 已选购物车商品 默认全选
				selectList: [],

				isAll: true,

				sum: 0,

				commodityIdList: []
			}
		},

		components: {
			commodityItem
		},

		onShow() {
			this.selectList = []
			this.commodityIdList = []
			this.getCarList()
		},

		methods: {
			// 获取购物车数据
			async getCarList() {
				let parmse = {
					userId: this.userInfo.id
				}

				let result = await getShoppingCartList(parmse)
				console.log(result, 'result');
				if (result.code == 20000) {
					this.carList = result.data || []

					// 默认全部选中
					this.carList.forEach(item => {
						this.selectList.push(item.id)
						this.commodityIdList.push({
							id: item.commodityId,
							number: item.commodityNum
						})
					})

					this.sumOfAmounts()
				}
			},

			// 商品计数器发生变化
			commodityChange(e) {
				console.log(e);
				// this.getCarList()
				this.carList.forEach(item => {
					if (item.id == e.id) {
						item.commodityNum = e.commodityNum
					}
				})
				this.sumOfAmounts()
			},

			onChange(e) {
				console.log(e, 'e');
				this.selectList = e.detail
				this.sumOfAmounts()


				this.commodityIdList = []
				this.carList.forEach(item => {
					e.detail.forEach(row => {
						if (item.id == row.id) {
							this.commodityIdList.push({
								id: item.commodityId,
								number: item.commodityNum
							})
						}
					})
				})
			},

			isAllChange(e) {
				console.log(e, 'e');
				this.isAll = e.detail
				this.selectList = []
				this.commodityIdList = []
				if (this.isAll) {
					this.carList.forEach(item => {
						this.selectList.push(item.id)
						this.commodityIdList.push({
							id: item.commodityId,
							number: item.commodityNum
						})
					})
				}

				this.sumOfAmounts()
			},

			// 计算金额
			sumOfAmounts() {
				if (this.selectList.length == 0) {
					this.sum = 0
					return
				}

				this.sum = 0
				this.carList.forEach(item => {
					if (this.selectList.includes(item.id)) {
						if (item.discountPrice) {
							this.sum += Number(item.discountPrice) * item.commodityNum
						} else {
							this.sum += Number(item.commodityPrice) * item.commodityNum
						}
					}
				})

				this.sum = this.sum.toFixed(2)
			},

			// 删除购物车
			async delCar(item) {
				let result = await deleteShoppingCart({
					id: item.id
				})

				if (result.code == 20000) {
					this.getCarList()
				}
			},

			// 点击 去结算
			async goCloseAnAccount() {
				// 保存订单 
				let parmse = {
					// 商品id列表
					commodityIdList: this.commodityIdList || [],
					// 用户id
					userId: this.userInfo.id,
					// 订单号  ---  以时间戳的形式
					orderNum: String(new Date().getTime()),
					grossAmount: this.sum,
					state:1 // 待支付			this.addressInfo = uni.getStorageSync("definedAddress") || {}			this.addressInfo = uni.getStorageSync("definedAddress") || {}			this.addressInfo = uni.getStorageSync("definedAddress") || {}			this.addressInfo = uni.getStorageSync("definedAddress") || {}			this.addressInfo = uni.getStorageSync("definedAddress") || {}			this.addressInfo = uni.getStorageSync("definedAddress") || {}
				}

				let result = await saveOrder(parmse)

				if (result.code == 20000) {
					uni.navigateTo({
						url: `/subPackages/pages/order/index?id=${result.id}`,
					})
				}

				// 删除 已选购物车数据
				console.log(this.selectList, 'selectList');
				let del = await deleteShoppingCart(this.selectList)
				console.log(del, 'del');
			}
		}
	}
</script>

<style scoped>
	.box {

		background-color: #F8F9FB;
	}

	>>>.van-checkbox__label {
		width: 100% !important;
	}

	.list {
		width: 100%;
		height: 90%;
		/* background-color: red; */
		padding: 10px;
		box-sizing: border-box;
		overflow-y: auto;
	}

	.bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 10%;
		border-top: 1px solid #eee;
		background-color: #fff;
		padding: 0px 10px;
		box-sizing: border-box;
	}

	.bottom .checkbox {
		/* width: 20%; */
		flex: 1;
	}

	.bottom .sum {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bottom .sum p span:nth-child(1) {
		font-size: 12px;
		color: #333;
	}

	.bottom .sum p span:nth-child(2) {
		font-size: 18px;
		color: #FF4F45;
		font-weight: 700;

	}

	.bottom .sum button {
		border-radius: 20px;
		height: 36px;
		width: 100px;
		color: #fff;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #1BA035;
		margin-left: 10px;
	}

	.van-swipe-cell__right {
		background-color: red;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 65px;
		height: 100px;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
	}
</style>